<script setup>

import {Delete, Edit} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import * as echarts from "echarts";
// import * as china from '.../json/china.json'

const echartsRef1 = ref(null);
const echartsRef3 = ref(null);
const echartsRef = ref(null);

async function loadMapData() {
  try {
    const response = await fetch('../src/json/china.json');
    const chinaMapData = await response.json();
    echarts.registerMap('china', chinaMapData);

    const chart = echarts.init(echartsRef.value);



// 配置项（保持不变）
    const option = {
      tooltip: {
        trigger: "item",
        formatter: "{b}<br/>{c} 111(p / km2)",
      },
      visualMap: {
        type: "piecewise",
        pieces: [{color: "red"}],
      },
      series: [
        {
          mapLocation:{ x:'10',y:'10',width:'80%',height:'80%'},
          name: "中国",
          type: "map",
          map: "china",
          label: {
            // 省份的名称是否显示
            show: true,
            // 字体颜色
            color: "#fff",
            // 字体大小
            fontSize: 10,
          },
          data: [], // 这里需要填充具体的地区数据
          itemStyle: {
            normal: {
              borderColor: "rgba(255, 255, 255, 0.4)",
              areaColor: "rgba(18,77,178,0.2)",
              borderWidth: 1,
              // 虚化程度
              shadowBlur: 1,
              shadowColor: "rgba(189,243,249)",
            },
            emphasis: {
              show: false,
              // 鼠标滑过颜色
              areaColor: "#97EFF4",
              // 鼠标滑过边框颜色
              shadowColor: "#05EFF7",
              // XY轴的偏移量
              shadowOffsetX: 5,
              shadowOffsetY: 5,
            },
          },
        },
      ],
    };

    chart.setOption(option);
  } catch (error) {
    console.error('Failed to load map data:', error);
  }
}

onMounted(() => {
  // 异步加载地图数据
  if (echartsRef.value) {
    loadMapData();
  }
  // const chart = echarts.init(echartsRef.value);
  // // const chartDom = document.getElementById('echartsRef'); // 假设你的DOM元素有一个id为'myChart'
  //   // 注册地图
  //   echarts.registerMap("china", china);
  //
  //   // 配置项
  //   const option = {
  //     tooltip: {
  //       trigger: "item",
  //       formatter: "{b}<br/>{c} 111(p / km2)",
  //     },
  //     visualMap: {
  //       type: "piecewise",
  //       pieces: [{color: "red"}],
  //     },
  //     series: [
  //       {
  //         name: "中国",
  //         type: "map",
  //         map: "china",
  //         label: {
  //           // 省份的名称是否显示
  //           // show: true,
  //           // 字体颜色
  //           color: "#fff",
  //           // 字体大小
  //           fontSize: 10,
  //         },
  //         data: [], // 这里需要填充具体的地区数据
  //         itemStyle: {
  //           normal: {
  //             borderColor: "rgba(255, 255, 255, 0.4)",
  //             areaColor: "rgba(18,77,178,0.2)",
  //             borderWidth: 1,
  //             // 虚化程度
  //             shadowBlur: 1,
  //             shadowColor: "rgba(189,243,249)",
  //           },
  //           emphasis: {
  //             show: false,
  //             // 鼠标滑过颜色
  //             areaColor: "#97EFF4",
  //             // 鼠标滑过边框颜色
  //             shadowColor: "#05EFF7",
  //             // XY轴的偏移量
  //             shadowOffsetX: 5,
  //             shadowOffsetY: 5,
  //           },
  //         },
  //       },
  //     ],
  //   };
  // chart.setOption(option);
  // const chart = echarts.init(echartsRef.value);
  // const option = {
  //   // ECharts 配置项
  //   title: {
  //     text: 'ECharts 示例'
  //   },
  //   tooltip: {},
  //   xAxis: {
  //     data: ['A', 'B', 'C', 'D', 'E', 'F']
  //   },
  //   yAxis: {},
  //   series: [{
  //     name: '销量',
  //     type: 'bar',
  //     data: [5, 20, 36, 10, 10, 20]
  //   }]
  // };

  const chart1 = echarts.init(echartsRef1.value);
  const option1 = {
    // ECharts 配置项
    title: {
      text: 'ECharts 示例'
    },
    tooltip: {},
    xAxis: {
      data: ['A', 'B', 'C', 'D', 'E', 'F']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  };
  chart1.setOption(option1);


  const chart3 = echarts.init(echartsRef3.value);
  const option3 = {
    // ECharts 配置项
    title: {
      text: 'ECharts 示例'
    },
    tooltip: {},
    xAxis: {
      data: ['A', 'B', 'C', 'D', 'E', 'F','A', 'B', 'C', 'D', 'E', 'F']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20,5, 20, 36, 10, 10, 20]
    }]
  };
  chart3.setOption(option3);
});

</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>数据看板</span>
      </div>
    </template>
    <el-row class="row-top">
      <el-col :span="12">
        <div ref="echartsRef" style="width: 757px;height: 500px;"></div>
      </el-col>
      <el-col :span="12">
        <div ref="echartsRef1" style="width: 600px; height: 400px;"></div>
      </el-col>
    </el-row>
  </el-card>
  <el-card style="margin-top: 10px">
    <el-row class="row-down">
      <el-col :span="24">
        <div ref="echartsRef3" style=" height: 400px;"></div>
      </el-col>
    </el-row>
  </el-card>

</template>

<style scoped lang="scss">
.row-top {
  width: 1632px;
  height: 500px;
  border-radius: 6px;
  background: #fff;
}

.row-down {
  width: 1632px;
  height: 590px;
  border-radius: 6px;
  background: #fff;
}
</style>
